<template>
	<view class="mainPage">
		<view class="head">
			<view class="head-left">
				<view class="head-date">
					{{fishing_date}}
				</view>
				<view class="fish-info">
					<view class="fish-info-li">
						总重量：{{weight_total}}斤
					</view>
					<view class="fish-info-li">
						总数量：{{quantity_total}}条
					</view>
					<view class="fish-info-li">
						总回鱼金额：{{ret_money}}
					</view>
				</view>
			</view>
			<view class="head-right">
				<u--image src="https://cdn.zhidiaotianxia.com//def/7918d20241224112638372.png" height="134rpx" width="200rpx"></u--image>
			</view>
		</view>
		<view class="fish-mod">
			<view class="fish-li" v-for="(item,index) in fishCollections" :key="index" v-if="fishCollections.length>0">
				<view class="fish-li-left">
					<view class="fish-li-left-icon">
						<u--image src="/static/images/fish-icon_it.png" height="40rpx" width="40rpx"></u--image>
					</view>
					<view class="fish-li-left-content">
						<view class="fish-li-name">
							{{item.partition_name}}-{{item.seat_name}}位
						</view>
						<view class="fish-li-time">
							{{item.collect_time}}
						</view>
					</view>
				</view>
				<view class="fish-li-right">
					<view class="fish-li-num">
						{{item.collect_weight}}
					</view>
					<view class="fish-li-unit">
						斤
					</view>
				</view>
			</view>
			<view class="empty" v-if="fishCollections.length === 0">
				<u-empty mode="list" icon="https://crmeb-test.zhidiaotianxia.com/uploads/def/20250114/dacd684d578bcab603c4e610f3cbe01b.png" text="当前无回鱼记录" width="120" textSize="13"></u-empty>
			</view>
		</view>
		<view class="loading-wrap" v-if="fishCollections.length>0">
			<u-loadmore :status="status" fontSize="26rpx" @loadmore="getRetFishDetailData"/>
		</view>
	</view>
</template>

<script>
	import { getRetFishDetail } from '@/api/api.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				errorNetwork: false,
				id:null,//钓票ID
				page:1,
				limit:10,
				fishing_date:null,//日期
				quantity_total:null,//总数量
				ret_money:null,//总回鱼金额
				weight_total:null,//总重量
				fishCollections:[],//回鱼详情列表
				status:'loadmore',//loadmore / loading / nomore
			}
		},
		onLoad(options) {
			if (!options.ticket_order_id) return this.$util.Tips({
				title: '缺少必要参数无法查看详情'
			}, {
				tab: 3,
				url: 1
			});
			this.id = options.ticket_order_id;
			this.getRetFishDetailData()
		},
		
		methods: {
			getRetFishDetailData(){
				let id = this.id
				// id = 101
				let params = {
					page:this.page,
					limit:this.limit
				}
				getRetFishDetail(id,params).then(res=>{
					console.log(res);
					let {fishing_date,quantity_total,ret_money,weight_total,fishCollections} = res.data
					this.fishing_date = fishing_date
					this.quantity_total = quantity_total
					this.ret_money = ret_money
					this.weight_total = weight_total
					this.fishCollections = this.fishCollections.concat(fishCollections)
					if(fishCollections.length < this.limit) this.status = 'nomore'
					else this.page++
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mainPage {
		background-color: #f3f3f3;
	}

	.head {
		padding: 20rpx 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background-color: #fff;
		margin-top: 20rpx;
		.head-left{
			.head-date{
				font-size: 36rpx;
				font-weight: bold;
			}
			.fish-info{
				margin-top: 20rpx;
				.fish-info-li{
					font-size: 28rpx;
					color: #717171;
					margin-bottom: 10rpx;
				}
			}
		}
		.head-right{
			padding-top: 40rpx;
		}
	}
	.fish-mod{
		padding: 20rpx 30rpx;
		background-color: #fff;
		margin-top: 20rpx;
		.fish-li{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			border-bottom: 2rpx solid #dbdbdb;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			.fish-li-left{
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				.fish-li-left-icon{
					padding-top: 20rpx;
				}
				.fish-li-left-content{
					margin-left: 20rpx;
					.fish-li-name{
						font-size: 28rpx;
						margin-bottom: 10rpx;
					}
					.fish-li-time{
						font-size: 24rpx;
						color: #9d9d9d;
					}
				}
			}
			.fish-li-right{
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				color: #fe8f46;
				padding-top: 20rpx;
				.fish-li-num{
					font-size: 32rpx;
					font-weight: bold;
					margin-right: 4rpx;
				}
				.fish-li-unit{
					font-size: 20rpx;
					margin-top: 10rpx;
				}
			}
		}
		.fish-li:nth-last-child(1){
			border-bottom: none;
		}
	}
	.loading-wrap{
		height: 60rpx;
		margin-top: 30rpx;
	}
	.empty{
		height: 500rpx;
		display: flex;
		justify-content: center;
	}
</style>